<template>
	<view>
		<view>
			<table-title content="发票申请表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<small-title content="办理内容"></small-title>
			<view style="margin-left: 80rpx;margin-right: 50rpx;">
				<uni-forms :modelValue="orderInfo">
					<uni-forms-item label="开票类别" name="invoiceType">
						<uni-easyinput :disabled="true" name="name" style="background-color: #ffffff;" type="text" v-model="invoiceType" />
					</uni-forms-item>
					<uni-forms-item label="消费类别" name="typeName">
						<uni-easyinput :disabled="true" name="name" style="background-color: #ffffff;" type="text" v-model="orderInfo.typeName" />
					</uni-forms-item>
					<uni-forms-item label="消费金额" name="amount">
						<uni-easyinput :disabled="true" name="taxNo" style="background-color: #ffffff;" type="text" v-model="orderInfo.amount" />
					</uni-forms-item>
					<uni-forms-item label="消费时间" name="createTime">
						<uni-easyinput :disabled="true" name="address" style="color: #000000;" type="text" v-model="orderInfo.createTime" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<small-title content="发票抬头信息"></small-title>
			<view style="margin-left: 80rpx;margin-right: 50rpx;">
				<uni-forms :modelValue="taxInfo">
					<uni-forms-item label="名称" name="name">
						<uni-easyinput name="name" style="background-color: #ffffff;" type="text" v-model="taxInfo.name" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="税号" name="taxNo">
						<uni-easyinput name="taxNo" style="background-color: #ffffff;" type="text" v-model="taxInfo.taxNo" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="单位地址" name="address">
						<uni-easyinput name="address" style="background-color: #ffffff;" type="text" v-model="taxInfo.address" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="电话号码" name="phone">
						<uni-easyinput name="phone" style="background-color: #ffffff;" type="number" v-model="taxInfo.phone" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="开户银行" name="bank">
						<uni-easyinput name="bank" style="background-color: #ffffff;" type="text" v-model="taxInfo.bank" :disabled="true" />
					</uni-forms-item>
					<uni-forms-item label="银行账户" name="bankAccount">
						<uni-easyinput name="bankAccount" style="background-color: #ffffff;" type="number" v-model="taxInfo.bankAccount" :disabled="true" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===3" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="finish" >确认收到发票</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder,
		syncPriceInfo,
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				orderInfo:'',
				taxInfo:'',
				invoiceType:'',
				processFlag:false,
				token:'',
				recordId: '待分配',                                                         //单号
				processNo:'待分配',
				state: '',																	   //状态
				status: -1,
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},                                                          //支付方式
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],                                                                                 
				proccessListDefult:[],                                                             
			}
		},
		methods: {
			finish(){
				console.log("[info]","发票确认：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/invoice/finish/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: '用户已收到发票，办结'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("用户确认发票调用失败")
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("invoice/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 if(res.data.data.specialType == 1){
							 this.invoiceType = '专用发票'
						 }else{
							 this.invoiceType = '普通发票'
						 }
						 this.orderInfo =JSON.parse(res.data.data.orderInfo)
						 this.taxInfo = JSON.parse(res.data.data.taxInfo)
						 this.status = parseInt(res.data.data.status)
						 switch(this.status) {
							 case 0:
								this.state = "待管家审核"
								break;
							 case 1:
								this.state = "待财务办理"
								break;
							 case 2:
								this.state = "待管家派送"
								break;
							 case 3:
								this.state = "待用户确认"
								break;
							 case 4:
								this.state = "已办结"
								break;
							 case 5:
								this.state = "管家已驳回"
								break;
							 default:
								this.status = -1
								this.state = "未定义状态"
						 } 
						 this.processNo = res.data.data.processNo
						 this.proccessListDefult = processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				// this.state = option.state
				this.token = uni.getStorageSync('token')
				console.log(this.token)
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.payway-style {
		display: flex;
		flex-direction: column;
		width: 650rpx;
	}
	.first-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}
	.second-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-right: none;
		width: 50rpx;
	}
	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.textarea-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 200rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
</style>
